import React, { Component } from 'react'

export default class Item extends Component {

    state = {
        isShow: false
    }

    mouse = (flag) => {
        return (e) => {
            this.setState({
                isShow: flag
            })
        }
    }

    inpChagne = (id) => {
        return (e) => {
            this.props.updateTodos(id, e.target.checked)
        }
    }

    del = (id) => {
        return (e) => {
            this.props.updateDel(id)
        }
    }

    render() {
        return (
            <div style={{ lineHeight: '30px', padding: '5px' }} onMouseMove={this.mouse(true)} onMouseLeave={this.mouse(false)}>
                <input type="checkbox" checked={this.props.item.done} onChange={this.inpChagne(this.props.item.id)}></input>
                <span>{this.props.item.name}</span>
                <button style={{ float: 'right', display: this.state.isShow ? '' : 'none' }} onClick={this.del(this.props.item.id)}>删除</button>
            </div>
        )
    }

    componentDidMount() {
        // console.log(this.props)
    }
}